<template>
    <div>
        <commpVxeTable
            :isCanWrap="true"
            :conditionBtnRow="true"
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:fbm_slot="{data}">
                <div :style="{width:data.widthString}">
                    <compSelector
                        :compType="typeSelect"
                        class="comp-select-box-b"
                        @selectHandleChange="fbmChange"
                        dictionaryType="OA申请科室单位"/>
                </div>
            </template>
            <template v-slot:fbmzcjjfl_slot="{data}">
                <div :style="{width:data.widthString}">
                    <a-cascader ref="cascaderBmzcjjfl" :display-render="displayRender" :options="bmJjflList" placeholder="请选择" @change="fbmzcjjflChange" />
                </div>
            </template>
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <a-button class="blue-btn" @click="exportClick" icon="export">导出</a-button>
                </vxe-form-item>
            </template>
        </commpVxeTable>
    </div>
</template>
<script>
import {exportYszbczjlData,getbmyszcjjflkm} from './service/index'
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import compSelector from '@/components/compSelector/compSelector'
import {typeSelect, } from '@/components/compSearchCriteria/ContractType'
export default {
    components: {
        commpVxeTable,compSelector
    },
    props:{
    },
    data() {
      return {
            reCommpVxeTable: '',
            typeSelect:typeSelect,
            dataTableConfig: {
                api: assessCheckApi.getIdByczjl,
                rowId: 'id',
                urlType: true,
                paramet:{
                    fyszbid: ''
                }
            },
            formItem: [
                {
                    label: '预算指标台账名称',
                    model: 'fystzmc',
                },{
                    label: '预算指标名称',
                    model: 'fyszbmc',
                },{
                    label: '报销人',
                    model: 'fbxr',
                },{
                    label: '报销部门',
                    model: 'fbxrbm',
                    slotName:'fbm_slot',
                    width:125,
                },{
                    label: '部门支出经济分类',
                    model: 'fbmzcjjfl',
                    slotName:'fbmzcjjfl_slot',
                    width:125,
                },{
                    label: '支付时间',
                    model: ['startTime','endTime'],
                    type: 'rangePicker',
                    format: 'YYYY年MM月DD日 HH时mm分ss秒',
                },

            ],
            columnsVxe: [
                {
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '预算指标台账名称',
                    field: 'fystzmc',
                    fixed:'left'
                },{
                    title: '预算指标名称',
                    field: 'fyszbmc',
                },{
                    title: '部门支出经济分类',
                    field: 'fbmzcjjfl',
                },{
                    title: '报销人',
                    field: 'fbxr',
                    width: 100,
                },{
                    title: '报销部门',
                    field: 'fbxrbm',
                },{
                    title: '收款人',
                    field: 'fskr',
                    width:125,
                },{
                    title: '操作时间',
                    field: 'fczsj',
                },{
                    title: '操作方式',
                    field: 'fczfs',
                    width: 100,
                },{
                    title: '收支类型',
                    field: 'fszlx',
                    width: 100,
                },{
                    title: '操作金额',
                    field: 'fczje',
                    width: 100,
                },
            ],
            idList: [],
            passObj: {},
            bmJjflList: [],
            zfJjflList: [],
            fzfsjCreateValue: [],
        }
    },
    mounted() {
        this.getBmJjfl()
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
            val.forEach(item => {
                this.idList.push(item.id)
            });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fbxrbm: ''
            }
        },
        displayRender({ labels }) {
            return labels[labels.length - 1];
        },
        getBmJjfl(){
            this.bmJjflList = []
            getbmyszcjjflkm({kmlx: '部门支出经济分类'}).then(res => {
                res.result.records.forEach(item => {
                    item = {
                        ...item,
                        label: item.kmmc + '(' + item.kmdm + ')',
                        value: item.kmdm
                    }
                    if (item.children && item.children.length > 0) {
                        item.children = item.children.map(items=> {return{...items,label: items.kmmc + '(' + items.kmdm + ')',value: items.kmdm}})
                    }
                    this.bmJjflList.push(item)
                })
                // const flattenedArray = this.flattenTreeData(res.result.records);
                // this.bmJjflList = flattenedArray
                //console.log('部门支出经济分类:',this.bmJjflList)
            })
        },
        fbmzcjjflChange(value){
            //console.log(value)
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fbmzcjjbm: value[value.length - 1]
            }
        },
        fbmChange(val){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fbxrbm: val
            }
        },
        exportClick(){
            let that = this
            if(that.idList.length == 0){
                that.$message.warning('请选择导出项')
            } else {
                that.$confirm({
                    title: '您确定要导出这些数据吗?',
                    content: '',
                    okText: '确定',
                    okType: 'info',
                    cancelText: '取消',
                    onOk() {
                        var fileName = '预算指标操作记录'
                        let list = that.idList.toString()
                        exportYszbczjlData({ids: list}).then((data) => {
                            // //console.log(data)
                            if (!data) {
                                that.$message.warning('文件下载失败')
                                return
                            }
                            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                            } else {
                                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                                let link = document.createElement('a')
                                link.style.display = 'none'
                                link.href = url
                                link.setAttribute('download', fileName + '.xls')
                                document.body.appendChild(link)
                                link.click()
                                document.body.removeChild(link) //下载完成移除元素
                                window.URL.revokeObjectURL(url) //释放掉blob对象
                            }
                        })
                    },
                    onCancel() {
                        //console.log('Cancel');
                    },
                });
            }
        },
    },
}
</script>
<style lang="less">
.red-btn{
    color:  white !important;
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
.comp-select-box-b{
    .ant-select {
    width: 100% !important;
    }
.ant-checkbox-group-item {
    width: 100% !important;
    // margin-left: 5px;
    // margin-bottom: 5px;
    margin: 10px;
}
}
</style>
